import React from "react";

import {connect} from "react-redux"
import { Input,Button } from 'antd';
import { List} from 'antd';


class Son extends React.Component {

    changValue(e){
        console.log(e.currentTarget.value)
        // dispatchChangeValue
        this.props.dispatchChangeValue(e.currentTarget.value)
        console.log(this.props)

    }
    sub(){
        let list=this.props.list
        list.push(this.props.value)
        this.props.dispatchChangeList(list)
    }
    nnn(item){
        console.log(item)
        const newList = this.props.list.filter(value=>value!==item)
        this.props.dispatchChangeList(newList)
    }
    render() {



        return (
            <div>
                <div className="topSubmit">
                    <Input placeholder={this.props.value} onChange={this.changValue.bind(this)} />
                    <Button type="primary" className="bbtn" onClick={this.sub.bind(this)}>提交</Button>
                </div>
                <div className="listSubmit">
                    <List

                        bordered
                        dataSource={this.props.list}
                        renderItem={item => (
                            <List.Item>
                                {item}

                                <Button type="primary" danger className="btn" onClick={this.nnn.bind(this,item)}>删除</Button>
                            </List.Item>

                        )}
                    />
                </div>

            </div>
        )
    }
}

export default connect(state => ({ ...state }), dispatch => ({
    dispatchChangeValue(value) {
        dispatch({
            type: 'changeValue',
            value
        })
    }, dispatchChangeList(list) {
        dispatch({
            type: 'changeList',
            list
        })
    }
}))(Son)

